<!-- 
*
* 音乐控件
*
*
 -->
 <template>
    <div class="music-container">
        <!-- 播放进度 -->
        <div class="play-schedule" :style="'width:'+ playerSetting.play_schedule +'%'"></div>
        <!-- 播放器主体 -->
        <div class="music-main">
            <div class="music-img">
                <el-image class="el-img" :src="currentPlayMusic.picUrl" fit="cover">
                    <template #error>
                        <div class="image-slot">
                            <el-icon>
                                <icon-picture />
                            </el-icon>
                        </div>
                    </template>
                </el-image>
            </div>
            <div class="music-play flx-align-center">
                <div class="icon-item">
                    <i class="iconfont icon-previous-1" @click="playMusicStore().previous()"></i>
                </div>
                <div  class="icon-item icon-item-middle">
                    <i class="iconfont icon-play" v-show="!playerSetting.play_state"  @click="playMusicStore().play()"></i>
                    <i class="iconfont icon-pause" v-show="playerSetting.play_state" @click="playMusicStore().suspend()"></i>
                </div>
                <div  class="icon-item">
                    <i class="iconfont icon-next-1" @click="playMusicStore().next()"></i>
                </div>
            </div>
            <div class="music-footer flx-align-center">
                <div class="icon-item icon-item-playlist">
                    <i class="iconfont icon-playlist" @click="isPlaylist = !isPlaylist"></i>
                </div>
                <div class="icon-item">
                    <i ref="popoverRefVolume" class="iconfont icon-24gf-volumeDisable" v-if="!playerSetting.volume"></i>
                    <i ref="popoverRefVolume" class="iconfont icon-24gf-volumeMiddle" v-else></i>
                </div>
            </div>
        </div>
        <!-- 音乐列表 -->
        <div class="music-list music-pop" :class="isPlaylist ? 'play-list-active' : ''">
            <ul>
                <li class="flx-align-center" v-for="(item, index) in likeMusicList" :key="item.id" @dblclick="playdbClick(item, index)">
                    <span class="iconfont icon-1_music81" :style="playerSetting.play_index == index ? 'opacity: 1;':'opacity: 0;'"></span>
                    <span class="sle" :style="item.noCopyrightRcmd ? 'color: #bbbbbb;' : ''">{{ item.name }}</span>
                </li>
            </ul>
        </div>
        <div class="music-name flx-center music-pop">
            <span class="sle">{{ currentPlayMusic.name+' - '+ currentPlayMusic.author}}</span>
        </div>
        <!-- 音量 -->
        <el-popover
            ref="popoverRef"
            :virtual-ref="popoverRefVolume"
            trigger="click"
            title=""
            placement="top"
            virtual-triggering>
            <div class="volume-progress flx-align-center">
                <el-slider v-model="playerSetting.volume" size="small" @input="volumeChange"/>
            </div>
        </el-popover>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { musicUserStore } from '@/store/music/user';
import { playMusicStore } from '@/store/music/playmusic';
const { currentPlayMusic, playerSetting, likeMusicList } = storeToRefs(playMusicStore());
import { useUserStore } from '@/store/system/user';


// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
    cloudMusicInit(); // 初始化
})

// ========================= 网易云音乐初始化 =========================
// 检查cookie是否过期，过期就重新登录。
async function cloudMusicInit() {
    try {
        // await musicUserStore().setUserInfo();
        // await playMusicStore().setPlayListsAll();
        // await playMusicStore().setMyLike();
        await useUserStore().getUserInfo();
    } catch (e) {
        console.error(e.message);
    };
};

// ========================= 播放音乐 =========================
let isPlaylist = ref(false); // 播放列表控制
// 双击播放音乐
function playdbClick(item, index) {
    if(item.noCopyrightRcmd) return;
    if(item.id !== currentPlayMusic.value.id) {
        playMusicStore().play(index);
        return
    }
    if(item.id == currentPlayMusic.value.id && !playerSetting.value.play_state) {
        playMusicStore().play();
        return 
    }
};

// ========================= 音量控制 =========================
const popoverRefVolume = ref();
const popoverRef = ref();
function volumeChange(val) {
    playMusicStore().settingVolume(val/100);
};
</script>

<style lang="scss" scoped>
    @import './music-control.scss';
</style>